<template>
    <div class="main">
        <div class="china-map-container">
            <div ref="chartRef" class="chart"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import chinaData from "@/assets/china.json"; // 引入本地china.json数据

export default {
    name: "ChinaMap",
    data() {
        return {
            chart: null,
            option: {
                title: {
                    text: "毕业生就业地域分布",
                    left: "center",
                    textStyle: {
                        color: "rgb(0, 255, 255)",
                        fontSize: 18,
                    },
                },
                tooltip: {
                    trigger: "item",
                    formatter: (params) => {
                        return `${this.formatName(params.name)}<br/>就业比例: ${params.value || 0
                            }%`;
                    },
                },
                visualMap: {
                    min: 0,
                    max: 50,
                    text: ["高", "低"],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ["#50a3ba", "#eac736", "#d94e5d"],
                    },
                    textStyle: {
                        color: "#fff",
                    },
                    bottom: "5%",
                    show: false, // 隐藏图例
                },
                series: [
                    {
                        name: "就业比例",
                        type: "map",
                        map: "china",
                        roam: false, // 允许地图的缩放和移动
                        zoom: 1.65, // 放大地图
                        center: [104.1954, 35.8617], // 设置地图中心点的坐标
                        label: {
                            show: true,
                            color: "#fff",
                            fontSize: 8, // 调整字体大小
                            fontWeight: "bold", // 设置字体加粗
                            formatter: (params) => {
                                return `${this.formatName(params.name)}\n${params.value || 0}%`; // 让数字显示在省份名下方
                            },
                            position: "bottom", // 设置标签位置为省份下方
                            verticalAlign: "top", // 垂直对齐方式：让数字显示在下方
                            offset: [0, 0], // 默认偏移量
                        },
                        itemStyle: {
                            areaColor: "#6caaa2",
                            borderColor: "#00ffff", // 荧光蓝边框
                            borderWidth: 1,
                            emphasis: {
                                areaColor: "#2b91d9",
                                borderColor: "#00ffff",
                                borderWidth: 2,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                                shadowBlur: 10,
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                color: "#fff",
                            },
                        },
                        data: this.generateData(),
                    },
                ],
            },
        };
    },
    mounted() {
        this.initChart();
        window.addEventListener("resize", this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.handleResize);
        this.chart && this.chart.dispose();
    },
    methods: {
        initChart() {
            // 注册本地中国地图数据
            echarts.registerMap("china", chinaData); // 使用本地的china.json数据

            // 初始化图表
            this.chart = echarts.init(this.$refs.chartRef);
            this.chart.setOption(this.option);
        },
        handleResize() {
            this.chart && this.chart.resize();
        },
        formatName(name) {
            // 自治区简写处理
            const specialRegions = {
                新疆维吾尔自治区: "新疆",
                西藏自治区: "西藏",
                广西壮族自治区: "广西",
                宁夏回族自治区: "宁夏",
                内蒙古自治区: "内蒙古",
                香港特别行政区: "香港",
                澳门特别行政区: "澳门",
                // 河北省: " ",
                // 天津市: " ",
            };

            if (specialRegions[name]) {
                return specialRegions[name];
            }

            // 去除省市后缀
            return name.replace(/(省|市|自治区|壮族|回族|维吾尔)/g, "");
        },
        generateData() {
            // 模拟数据 - 实际应用中应从API获取
            return [
                { name: "北京市", value: 2.51 },
                { name: "天津市", value: 0.75 },
                { name: "河北省", value: 0.94 },
                { name: "山西省", value: 0.9 },
                { name: "内蒙古自治区", value: 0.9 },
                { name: "辽宁省", value: 0.34 },
                { name: "吉林省", value: 0.07 },
                { name: "黑龙江省", value: 0.15 },
                { name: "上海市", value: 2.4 },
                { name: "江苏省", value: 4.68 },
                { name: "浙江省", value: 6.81 },
                { name: "安徽省", value: 1.46 },
                { name: "福建省", value: 0.45 },
                { name: "江西省", value: 0.3 },
                { name: "山东省", value: 3.71 },
                { name: "河南省", value: 4.01 },
                { name: "湖北省", value: 2.28 },
                { name: "湖南省", value: 1.42 },
                { name: "广东省", value: 9.96 },
                { name: "广西壮族自治区", value: 0.82 },
                { name: "海南省", value: 0.07 },
                { name: "重庆市", value: 0.67 },
                { name: "四川省", value: 4.61 },
                { name: "贵州省", value: 0.64 },
                { name: "云南省", value: 1.2 },
                { name: "西藏自治区", value: 0.19 },
                { name: "陕西省", value: 43.39 },
                { name: "甘肃省", value: 1.2 },
                { name: "青海省", value: 0.3 },
                { name: "宁夏回族自治区", value: 1.24 },
                { name: "新疆维吾尔自治区", value: 1.65 },
                { name: "台湾省", value: 0 },
                { name: "香港特别行政区", value: 0 },
                { name: "澳门特别行政区", value: 0 },
            ];
        },
        getLabelOffset(params) {
            // 设置特定省份的偏移量
            if (["北京市", "天津市", "河北省"].includes(params.name)) {
                return [0, 15]; // 对这三个省份设置更大的垂直偏移量
            }
            return [0, 5]; // 其他省份的默认偏移量
        },
    },
};
</script>

<style scoped>
.china-map-container {
    width: 32vw;
    /* 修改宽度为32vw */
    height: 100%;
    /* background-color: #1b58d1; */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chart {
    width: 100%;
    height: 100%;
}

.main {
    overflow: hidden;
    width: 100%;
    height: 70%;
}

.main {
    width: 100%;
    position: relative;
    background-color: rgb(11, 31, 66);
    border: 2px solid #00a1ff;
    border-radius: 8px;
    padding-top: 0.3vw;
}

.main::before {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 30px;
    width: calc(100% - 2rem);
    content: "";
    border-top: 2px solid #016886;
    border-bottom: 2px solid #016886;
    z-index: 0;
}
</style>